<template>
    <div style="background-color: #F5F5F5;">

        <el-container style="width: 70%;margin: 0 auto;">

            <el-header style="background-color:#8FC0A9;height: 65px;display: flex">
                <div @click="goBack">
                    <h3><i class="el-icon-back"></i>返回</h3>
                </div>
                <div >
                    <img :src=logoImage style="width: 100px;height: 65px;margin-left: 20px">
                </div>

                <div style="margin-left: 700px" @click="goUser">
                    <h3><i class="el-icon-s-custom"></i>个人中心</h3>
                </div>
            </el-header>

            <el-main style="height: 700px;background-color:#FAF3DD;padding: 80px">

                <div style="display:flex;margin: 0 auto;">
                    <div style="margin-left: 40px">
                        <img :src=goods.goodsImage style="height: 400px;width: 300px;">
                    </div>
                    <div style="margin-left: 50px;text-align: center;width: 500px">
                        <el-divider></el-divider>
                        <h3>{{goods.goodsName}}</h3>
                        <h5>库存：{{goods.goodsAmount}}</h5>

                        <div style="background-color: #C8D5B9;height: 50px;display: flex;margin: 0 auto">
                            <h1 style="color:red;margin-top: 10px;margin-left: 200px">¥ {{goods.goodsPrice}}</h1>
                            <p style="font-size: smaller;margin-top: 20px;margin-left: 10px">绿叶/个</p>
                        </div>

                        <div style="margin: 50px">
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                        </div>

                        <div >
                            <el-button type="danger" @click="buyNow" plain>立即购买</el-button>
                            <!--<el-button type="danger" @click="carAdd" plain><i class="el-icon-shopping-cart-2"></i>加入购物车</el-button>-->
                        </div>
                    </div>
                </div>

                <div style="margin-left: 50px">
                    <h5 @click="showAuthor"><i class="el-icon-search"></i>查看卖家信息</h5>
                    <el-collapse style="background-color:#C8D5B9;margin: 30px">
                        <el-collapse-item>
                            <template slot="title">
                                <i class="header-icon el-icon-info"></i><h5>商品介绍</h5>
                            </template>
                            <p style="margin-left: 10px">{{goods.goodsContent}}</p>
                        </el-collapse-item>
                    </el-collapse>

                </div>

            </el-main>

            <el-drawer
                    :visible.sync="drawer"
                    :with-header="false">
                <span>
                    <div style="margin: 0 auto;padding: 150px;text-align: center">
                        <h5>卖家信息：</h5>
                        <el-avatar  :size="100"  :src=user.userImage></el-avatar>
                        <h3>
                            {{user.userName}}
                        </h3>
                        <h3>
                            {{user.place}}
                        </h3>
                        <h3><i class="el-icon-chat-line-round" @click="goToChat"></i></h3>
                    </div>
                </span>
            </el-drawer>

            <el-drawer
                    :visible.sync="drawer1"
                    :with-header="false">
                <span>
                    <div  style="margin: 0 auto;padding: 150px;text-align: center">
                        <h3>请确认订单：</h3>
                        <div style="border: 1px solid #C8D5B9;width: 200px;border-radius: 10px;padding: 10px">
                            <h5>商品：{{goods.goodsName}}</h5>
                            <h5>单价：{{goods.goodsPrice}}</h5>
                            <h5>数量：{{num}}</h5>
                            <h5>总价：{{num*goods.goodsPrice}}</h5>
                            <el-button type="danger" @click="submitOrder">提交订单</el-button>
                        </div>

                    </div>
                </span>
            </el-drawer>

            <Footer></Footer>
        </el-container>
    </div>

</template>

<script>
    import Footer from "../components/Footer";

    export default {
        name: "GoodsDetail",
        components:{
            Footer,
        },
        data(){
            return{
                goodsIdCurrently:null,
                logoImage:require("../assets/bgc/logo.png"),
                num:1,
                sumPrice:null,
                drawer: false,
                drawer1:false,
                goods:{
                    goodsName: '',
                    goodsPrice: null,
                    goodsAmount: null,
                    goodsAuthorId: null,
                    goodsImage: '',
                    goodsContent:'',
                },
                user:{
                    userName:'',
                    userImage:'',
                    balance:null,
                    place:'',
                }
            }
        },
        methods:{
            getGoodsDetail(){
                console.log("开始发送请求。。。")
                this.$http({
                    url:'http://localhost:8083/goods/showByOne',
                    method:'POST',
                    params:{
                        "goodsID":this.goodsIdCurrently
                    }
                }).then(res=>{
                    this.goods = res.data;
                    this.goods.goodsImage = require("../assets/goodsImage/"+ res.data.goodsImage);
                    console.log(this.goods);
                }).catch(error=>{
                    console.log(error);
                })
            },

            getParams(){
                var goodsIdItem = localStorage.getItem("goodIdCurrent");
                console.log("接收到的参数为："+goodsIdItem);
                this.goodsIdCurrently = goodsIdItem;
                console.log(this.goodsIdCurrently);
            },

            goBack(){
                this.$router.push("/");
            },

            goUser(){
              this.$router.push("/user")
            },

            handleChange(value) {
                console.log(value);
            },

            showAuthor(){
                this.drawer = true;
                this.getUser();
            },

            getUser(){
                this.$http({
                    method:'POST',
                    url:"http://localhost:8083/user/userDetail",
                    params:{
                        "userId":this.goods.goodsAuthorId
                    }
                }).then(res=>{
                    console.log(res.data);
                    this.user = res.data;
                    this.user.userImage = require("../assets/bgc/"+ res.data.userImage);
                    console.log(this.user);
                }).catch(error=>{
                    console.log(error);
                })
            },

            openShoppingCar(){
                this.drawer1 = true;
                this.sumPrice = this.num * this.goodsPrice;
            },

            submitOrder(){
                console.log(this.num*this.goods.goodsPrice);
                this.drawer1 = false;
                this.$http({
                    method:'POST',
                    url:'http://localhost:8083/goods/placeOrder',
                    params:{
                        "order1HomeUserId":this.goods.goodsAuthorId,
                        "order1HomeAmount":this.num,
                        "order1PriceOne":this.goods.goodsPrice,
                        "order1PriceSum":this.num*this.goods.goodsPrice,
                        "order1BuyUserId":localStorage.getItem("userID"),
                        "order1GoodsId":this.goodsIdCurrently,
                    }
                }).then(res=>{
                    console.log(res.data);
                    if(res.data.res == true){
                        this.$message('下单成功，详情请到个人中心查看');
                    }else {
                        this.$message('下单失败，请稍后重试');
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },

            buyNow(){
                /*this.$router.push("/CreateOrder");*/
                this.drawer1 = true;
            },

            carAdd(){

                this.$notify({
                    title: '添加购物车成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                });
            },

            goToChat(){
                this.$router.push("/chat");
            }

        },

        created() {
            this.getParams();
            this.getGoodsDetail();
        },

        destroyed() {
            localStorage.removeItem("goodIdCurrent");
        },


    }
</script>

<style scoped>

</style>